<template>

  <div class="map_sty">

    <h2>品牌热力图</h2>
    <!-- 热力图 -->
    <div
      class="content"
      ref="hm"
    >
    </div>
  </div>

</template>

<script>
import h337 from "../../../static/heatmap2.0";
import moment from "moment";

export default {
  name: "heatmap",
  props: {
    // point: {
    //   type: Array,
    //   default: []
    // },
    maxOpacity: {
      type: Number,
      default: 0.6
    },
    radius: {
      type: Number,
      default: 30
    },
    blur: {
      type: Number,
      default: 0.9
    },
    backgroundColor: {
      type: String,
      default: "rgba(0, 0, 58, 0)"
    },
    // maxValue: {
    //   type: Number,
    //   default: 1000
    // },
    resize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      heatmap: null,
      point: [],
      maxValue: 1000,
      Height: 0,
      Width: 0,
      floorMap: {
        B1: { xmin: 147, ymin: 55, xmax: 925, ymax: 2344 },
        "1F": { xmin: 140, ymin: 54, xmax: 912, ymax: 2299 },
        "2F": { xmin: 140, ymin: 55, xmax: 962, ymax: 2304 },
        "3F": { xmin: 144, ymin: 54, xmax: 933, ymax: 2298 },
        "4F": { xmin: 134, ymin: 51, xmax: 900, ymax: 2288 },
        "5F": { xmin: 142, ymin: 53, xmax: 934, ymax: 2294 },
        "6F": { xmin: 136, ymin: 51, xmax: 925, ymax: 2293 },
        "7F": { xmin: 144, ymin: 52, xmax: 924, ymax: 2289 },
        "8F": { xmin: 137, ymin: 46, xmax: 925, ymax: 2290 }
      }
    };
  },

  mounted() {
    this.resizeTool();
    this.getHeadMapData();
  },

  created() {
    // this.getHeadMapData('1F')
  },

  methods: {
    init() {
      this.heatmap = h337.create({
        maxOpacity: this.maxOpacity,
        radius: this.radius,
        blur: this.blur,
        backgroundColor: this.backgroundColor,
        container: this.$refs.hm
      });
      console.log(this.point, "数据值");
      if (this.point.length !== 0) {
        console.log("渲染", this.point);
        this.setData(this.point);
      }
      this.$emit("create", { msg: "渲染ok" });
    },
    addData(data) {
      /* 新增数据 */
      this.heatmap && this.heatmap.addData(data);
    },
    setData(dataPointArr) {
      /* 全局渲染 */
      let data = {
        max: this.maxValue,
        min: 0,
        data: dataPointArr
      };

      this.heatmap && this.heatmap.setData(data);
    },
    resizeTool() {
      let time = Object;

      clearTimeout(time);
      time = setTimeout(() => {
        this.setData(this.point);
      }, 500);
    },
    // 商场楼层热力图
    getHeadMapData() {
      let andatongURL = this.$config.andatongurl + "/andatong/heat_map";

      let nowstr = moment().format("YYYYMMDD");

      this.$http
        .post(andatongURL, {
          bi_name: "heat_map",
          date: "20181217",
          floor: "1F",
          mall_id: "sh001",
          page: 1,
          page_size: 10000,
          venue: "AB"
        })
        .then(res => {
          let data = res.data.data;
          this.point = [];

          console.log("热力点", data);
          let canvas_height = this.$refs.hm.offsetHeight;
          let canvas_width = this.$refs.hm.offsetWidth;

          let max = Number.NEGATIVE_INFINITY;
          data.forEach(result => {
            let obj = {};

            obj["y"] = (result["bi_value"]["x"] / 150) * canvas_height;
            obj["x"] = (result["bi_value"]["y"] / 60) * canvas_width;

            obj["value"] = result["bi_value"]["count"] * 10;
            max = obj["value"] > max ? obj["value"] : max;
            this.point.push(obj);
          });
          console.log("this.point", this.point);
          this.heatmap ? this.setData(this.point) : this.init();

          if (max < 100) {
            max = max * 5;
          } else if (max < 700) {
            max = (max * 0.8).toFixed(0);
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
.map_sty {
  width: 1114px;
  height: 520px;
  float: left;

  .content {
    width: 1114px;
    height: 520px;
    z-index: 100;
    background: url("../../assets/images/map.png") no-repeat;
  }
}
</style>
<style>
 .map_sty h2 ,.flow_direction  h2,.real_time h2 ,.flow_ranking h2 ,.potential h2 {
    font-size: 20px;
    color: #fff;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    display: inline-block;
    background: url("../../assets/images/tit_bg.png") top repeat-x,
      url("../../assets/images/tit_bg.png") bottom repeat-x,
      url("../../assets/images/tit_line.png") right top no-repeat,
      url("../../assets/images/tit_line.png") right bottom no-repeat,
      url("../../assets/images/tit_line.png") left top no-repeat,
      url("../../assets/images/tit_line.png") left bottom no-repeat;
  }
</style>
